<template>
  <div>
    <!-- 登录 -->
    <!-- 登录页面 -->
    <div class="top">
      <img src="../../assets/logo.png" alt="" />
      <span>请输入内部密码进入</span>
    </div>

    <!-- Form 表单 -->
    <van-form @submit="onSubmit">
      <!-- <van-field
				v-model="password"
				type="password"
				name="minePass"
				label="密码"
				autofocus
				placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]"
			/>  -->

      <van-password-input
        :value="value"
        info="密码为 4位数字"
        :length="4"
        autofocus
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="value"
        maxlength="4"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>
  
  <script>
// 用请求，先引用请求
// 引入rant Notify 消息提示
import { Notify, Dialog } from "vant";
import { internallogin } from "@/api/index";
export default {
  data() {
    return {
      password: "",
      value: "",
      showKeyboard: true,
    };
  },
  methods: {
    onSubmit() {
      // values.mineTitle = this.$route.query.title
      internallogin({
        minePass: this.value,
        Id: this.$route.query.id,
      }).then((res) => {
        if (res.data == "interiorpassword") {
          Dialog.alert({
            title: "内部登录",
            message: "登录成功",
          }).then(() => {
            let data = {
              path: this.$route.query.redirect,
              query: {
                i: this.$route.query.title,
                interiorpassword: res.data,
                id: this.$route.query.id,
                num: this.$route.query.num,
                title: this.$route.query.title,
              },
            };
            this.$router.push(data);
          });
        } else {
          Notify({ type: "danger", message: "密码错误" });
        }
      });
    },
  },
};
</script>
  
  
  <style scoped>
.top {
  width: 100%;
  font-size: 0.16rem;
  height: 1.5rem;
  color: black;
  position: relative;
}

.top span {
  font-size: 0.19rem;
  display: inline-block;
  position: absolute;
  top: 0.68rem;
}

.top img {
  width: 15%;
  margin: 0.5rem 0.1rem 1rem;
}
</style>